<template>
	<up-popup :show="isNote" round="10">
		<view class="note-box">
			<view class="u-flex u-flex-between u-flex-items-center title">
				<up-tabs :list="tabList" @click="click"></up-tabs>
				<view class="close-box" @click.stop="hind">
					<up-icon name="close" color="#999" size="20"></up-icon>
				</view>
			</view>

			<!-- 笔记内容 -->
			<view class="u-p-20 list">
				<view class="item" v-for="item in 10" :key="item">
					<!-- 作者 -->
					<view class="u-flex u-flex-items-center">
						<image class="avatar" src="../../../static/logo.png" mode="aspectFill"></image>
						<view class="u-flex u-flex-column u-m-l-20">
							<text class="y-f-s-26 y-f-w-bold">法外狂人</text>
							<text class="u-m-t-6 y-f-s-20">2024-05-17 14:30</text>
						</view>
					</view>

					<view class="u-m-t-20 y-f-s-26" style="color: #333;">
						2013年中央一号文件《中共中央、国务院关于加快发展现代农业，进一步增强农村发展活力的若干意见》提出，“农业生产经营组织创新是推进现代农业建设的核心和基础。要尊重和保障农户生产经营的主体地位，培育和壮大新型农业生产经营组织，充分激发农村生产要素潜能。”
					</view>

				</view>
			</view>

			<!-- 新建笔记 -->
			<view class="u-flex u-flex-center u-flex-items-center add-btn" @click.stop="openEdit">
				<up-icon name="plus" color="#fff" size="20"></up-icon>
			</view>

			<!-- 添加笔记 -->
			<up-popup :show="isEdit" mode="center" round="10">
				<view class="edit-box" style="width: calc(100vw - 60rpx);">
					<view class="u-flex u-flex-center u-flex-items-center title">
						<text class="y-f-w-bold">编辑笔记</text>
						<view class="close-box" @click.stop="hindEdit">
							<up-icon name="close" color="#999" size="20"></up-icon>
						</view>
					</view>

					<view class="u-p-l-30  u-p-r-30">
						<up-form>
							<up-form-item>
								<textarea class="u-border" v-model="noteForm.content" placeholder="请输入笔记内容"></textarea>
							</up-form-item>
							<up-form-item>
								<view class="u-flex u-flex-items-center"
									@click.stop="noteForm.isOpen = !noteForm.isOpen">
									<view class="u-flex u-flex-center u-flex-items-center icon-box"
										:class="[{'cur':noteForm.isOpen}]">
										<up-icon name="checkbox-mark" color="#f8f8f8" size="12"></up-icon>
									</view>
									<text class="u-m-l-14">是否公开</text>
								</view>
							</up-form-item>

							<up-form-item>
								<up-button text="保存笔记" color="#1269db" @click.stop="submit"></up-button>
							</up-form-item>
						</up-form>
					</view>
				</view>
			</up-popup>
		</view>
	</up-popup>
</template>

<script>
	export default {
		name: "yNote"
	}
</script>
<script setup>
	import {
		reactive,
		ref
	} from "vue";
	let isNote = ref(false)

	// 标签
	const tabList = reactive([{
		name: '全部笔记',
		value: 'ALL'
	}, {
		name: '我的笔记',
		value: 'MINE'
	}, ])

	// 打开
	const open = (e) => {
		isNote.value = true
	}

	// 关闭
	const hind = (e) => {
		isNote.value = false
		reset()
	}


	// 笔记
	let noteForm = reactive({
		isOpen: true,
		content: ''
	})

	let isEdit = ref(false)
	const openEdit = () => {
		reset()
		isEdit.value = true
	}
	const hindEdit = () => {
		reset()
		isEdit.value = false
	}
	const reset = () => {
		Object.assign(noteForm, {
			isOpen: true,
			content: ''
		})
	}

	// 提交
	const submit = () => {
		console.log('submit');
		if (!noteForm.content.trim()) {
			return uni.showToast({
				icon: "none",
				title: "笔记不能为空"
			})
		}

		hindEdit()
	}

	// 暴露方法属性供组件实例使用
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.title {
		position: relative;
		width: 100%;
		height: 100rpx;

		.close-box {
			position: absolute;
			right: 30rpx;
		}
	}

	textarea {
		width: 100%;
		height: 260rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.note-box {
		position: relative;

		.list {
			min-height: 460rpx;
			max-height: 680rpx;
			overflow-y: scroll;

			.item {
				border-top: 1px solid #ddd;
				padding: 30rpx 0;
			}

			.avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				border: 2px solid #1269db;
			}
		}

		.add-btn {
			position: absolute;
			right: 30rpx;
			bottom: 40rpx;
			width: 70rpx;
			height: 70rpx;
			background: $uni-color-primary;
			border-radius: 50%;
			color: #fff;
		}
	}

	.edit-box {
		.icon-box {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			border: 1px solid #999;
		}

		.cur {
			border-color: #1296db;
			background: #1296db;
		}
	}
</style>